<template>
  <div class="markdown-renderer" v-html="renderedHtml"></div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps } from 'vue'
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark.css' // 导入代码高亮样式（可选其他样式）

// 定义传入的 Markdown 内容参数
const props = defineProps({
  content: {
    type: String,
    default: '',
  },
})

// 渲染后的 HTML
const renderedHtml = ref('')

// 配置 marked，启用代码高亮
marked.setOptions({
  highlight: function (code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value
    }
    return hljs.highlightAuto(code).value
  },
  breaks: true, // 支持换行
  gfm: true, // 支持 GitHub Flavored Markdown
})

// 监听 content 变化，重新渲染
watch(
  () => props.content,
  (newContent) => {
    renderedHtml.value = marked(newContent || '')
  },
  { immediate: true },
)
</script>

<style scoped>
.markdown-renderer {
  /* 自定义 Markdown 样式 */
  line-height: 1.8;
  font-size: 14px;
}

/* 可根据需要补充 Markdown 元素样式（如标题、列表、链接等） */
.markdown-renderer h1,
.markdown-renderer h2,
.markdown-renderer h3 {
  margin: 1.5em 0 1em;
  font-weight: 600;
}

.markdown-renderer p {
  margin: 1em 0;
}

.markdown-renderer ul,
.markdown-renderer ol {
  margin: 1em 0;
  padding-left: 2em;
}

.markdown-renderer pre {
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
}

.markdown-renderer code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
</style>
